<!--
 * @Author: xuxu12138 1718324422@qq.com
 * @Date: 2024-07-03 13:53:56
 * @LastEditors: xuxu12138 1718324422@qq.com
 * @LastEditTime: 2024-07-13 10:45:46
 * @FilePath: /things-admin/src/view/member/UsageRecords.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!-- 使用记录 -->
    <div class="core_content">
      <div class="content">
        <Table border :columns="columns" highlight-row :data="data"> 
          <template #lifetime="{row}">
            {{ Math.ceil(row.lifetime / 60 )}}
          </template>
        </Table>
        <div style="display: flex;justify-content: space-between;margin-top: 20px;">
        <div></div>
        <Page :total="total" show-sizer/>
      </div>
      </div>
    </div>
  </template>
  
  <script>
  import {massageRecord} from '@/base/api/MemberApi'
  export default {
    data() {
      return {
        columns: [
          {
            title: "时间",
            key: "created"
          },
          {
            title: "使用时长/分钟",
            slot: "lifetime"
          },
          {
            title: "模式名称",
            key: "modeName"
          },
          {
            title: "设备型号",
            key: "modelName"
          },
          {
            title: "设备分类",
            key: "sortName"
          }
        ],
        data: [
  
        ],
        total:0
      };
    },
    methods:{
      massageRecord() {
        massageRecord(this.$route.params.id).then(res=>{
            this.data = res.data
        })
      }
    },
    mounted() {
      // 查询个人数据
      this.massageRecord()
    }
  };
  </script>
  
  <style lang="less" scoped>
  .header {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .content {
    margin-top: 40px;
  }
  </style>
